<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/4 0004
  Time: 13:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>白名单</title>
    <jsp:include page="/commons/common-js.jsp"></jsp:include>
</head>
<body>

<table class="layui-hide" id="customertable" lay-filter="customertable"></table>

<%--    表单--%>
<form id="customer_form" class="layui-form my_form"  style="display: none;padding: 10px 20px 0px 0px;" lay-filter="customer_form">
    <div class="layui-form-item">
        <label class="layui-form-label">gid</label>
        <div class="layui-input-block">
            <input name="gid" required autocomplete="off" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input name="email" required lay-verify="email" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">Line</label>
        <div class="layui-input-block">
            <input name="line" required lay-verify="line" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button id="customer_form_submit" class="layui-btn" lay-filter="customer_form_submit" lay-submit style="display: none">立即提交</button>
</form>

<script type="text/html" id="addcustomer">
    <div class="layui-inline">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    </div>
</script>

<script type="text/html" id="delcustomer">
    <button class="layui-btn layui-btn-xs" lay-event="del">删除</button>
</script>

<script>
    layui.use(['table', 'form', 'laytpl'], function () {
        var table = layui.table,
            form = layui.form,
            laytpl = layui.laytpl

        var tableins = table.render({
            elem: '#customertable'
            , url: '/customer/all'
            , defaultToolbar: []
            , toolbar: '#addcustomer'
            , cols: [[
                {field: 'userId', width: 130, title: 'id'}
                ,{field: 'gid', width: 130, title: 'gid'}
                ,{field: 'nickName', width: 130, title: '名称'}
                ,{field: 'phone', width: 130, title: '手机'}
                ,{field: 'line', width: 130, title: 'line'}
                ,{field: 'email', width: 160, title: '邮箱'}
                ,{field: 'utils', width: 60, toolbar:'#delcustomer',title: '删除'}
            ]]
            , height: '760',
        });


        //头工具栏事件
        table.on('toolbar(customertable)', function(obj){
            switch(obj.event){
                case 'add' :
                    //页面层
                    layer.open({
                        id:"customer_layer",
                        type:1,
                        content:$('#customer_form'),
                        btn:['提交','关闭'],
                        yes: function(index, layero){
                            $("#customer_form_submit").click();
                            return false;
                        },
                    })
                    break;
            };
        });

        //行工具栏事件
        table.on('tool(customertable)', function(obj){

            switch(obj.event){
                case 'del' :
                    $.ajax({
                        url:"/customer/del?uid="+obj.data.userId,
                        success:function(res){
                            layer.msg(res.msg);
                            tableins.reload();
                        }
                    })
                    break;
            };
        });

        form.on("submit(customer_form_submit)",function(data){
            let params=data.field;
            console.info(data)
            $.post("/customer/add", params, function (res) {
                if(res.code==0){
                    layer.msg(res.msg,{icon:1},function(){
                        layer.closeAll();
                        tableins.reload();
                    })
                }else{
                    layer.msg(res.msg,{icon:2});
                }
            }, 'json');
            return false;
        })

    });

</script>

</body>
</html>
